<template>
  <div class="app-container">
    <el-tabs v-model="deviceId" @tab-change="getCameraByDeviceId">
      <el-tab-pane v-for="(device,index) in deviceList" :key="index" :label="device.deviceName" :name="device.id">
        <el-row v-if="deviceId === device.id">
          <el-col :span="24" class="card-box">
            <el-card style="height: 100%">
              <!--              <template #header><span>胶带秤基本信息</span></template>-->
              <div >
                <el-row>
                  <el-col :span="5">
                    <span>{{ device.deviceName }}</span>
                  </el-col>
                  <el-col :span="5">
                    <span>带速：</span>
                    <span>{{ (device.speed ? device.speed : '0.00') +'米/秒'}}</span>
                  </el-col>
                  <el-col :span="14">
                    <span>密度：</span>
                    <span>{{ (device.density ? device.density : '0.00') +'吨/立方米'}}</span>
                    <span style="margin-left: 30px">
                      <el-button type="primary" link icon="Setting" v-hasPermi="['coal:device:config']" @click="setDensity(device.id)" >设置密度</el-button>
                    </span>
                    <span style="margin-left: 30px">
                      <el-button type="danger" link  icon="Search" plain @click="daily()">查看昨日日报</el-button>
                    </span>
                  </el-col>

                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row v-if="deviceId === device.id" style="margin-top: 0">
          <el-col :span="12" class="card-box" style="padding-right: 5px">
            <el-card style="height: 100%">
              <template #header><span>煤流瞬时图</span></template>
              <Dashboard :device-id="device.id"/>
            </el-card>
          </el-col>
          <el-col :span="12" class="card-box" style="padding-left: 5px">
            <el-card style="height: 100%">
              <template #header><span>视频监控</span></template>
              <CameraPlayer :style="{width: '100%', height: '350px'}" v-if="cameraList.length > 0" :device-id="cameraList[0].id"/>
              <el-empty v-else description="无视频监控" />
            </el-card>
          </el-col>
        </el-row>
        <el-row v-if="deviceId === device.id">
          <el-col :span="24" class="card-box">
            <el-card style="height: 100%">
              <template #header><span>煤流瞬时值趋势图</span></template>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <ChartLine :device-id="device.id" :name="device.deviceName"/>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row v-if="deviceId === device.id">
          <el-col :span="24" class="card-box">
            <el-card style="height: 100%">
              <template #header><span>对比分析</span></template>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <Briefing :device-id="device.id"></Briefing>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!-- 修改设备密度对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="deviceRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备名称" prop="deviceName">
          {{ form.deviceName }}
        </el-form-item>

        <el-form-item label="密度" prop="density">
          <el-input v-model="form.density" placeholder="请输入密度">
            <template #append>t/m³</template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Craft">
import ChartLine from './chartLine.vue';
import Dashboard from './dashboard.vue';
import Briefing from './briefing.vue';
import CameraPlayer from '@/views/camera/index.vue';
import { allListDevice, getDevice, configDensity,getCamera } from '@/api/coal/device';
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const deviceList = ref([]);
const cameraList = ref([]);
const deviceId = ref('');
const title = ref('设置密度');
const open = ref(false);
let flushDeviceList = ref<String>("");

const data = reactive({
  form: {},

  rules: {
    density: [
      { required: true, message: "密度不能为空", trigger: "blur" }
    ],
    ip: [
      { required: true, message: "连接ip不能为空", trigger: "blur" }
    ],
    port: [
      { required: true, message: "连接port不能为空", trigger: "blur" }
    ],
  }
});

const { form, rules } = toRefs(data);

onMounted(() => {
  deviceId.value = route.query.deviceId;
  getDeviceList(true)
  flushDeviceList = setInterval(()=>{
    getDeviceList(false)
  },5000)
})
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    deviceName: null,
    density: null,
    ip: null,
    port: null,
  };
  proxy.resetForm("deviceRef");
}

function getDeviceList(flushCamera) {
  allListDevice({deviceType:3}).then(response => {
    deviceList.value = response.data;
    deviceId.value = deviceId.value ? Number(deviceId.value) : deviceList.value[0].id
    if(flushCamera) {
      getCameraByDeviceId(deviceId.value)
    }
  })
}
function getCameraByDeviceId(deviceId) {
  cameraList.value = []
  getCamera(deviceId).then(response => {
    cameraList.value = response.data;
  })
}

function setDensity(deviceId){
  reset();
  getDevice(deviceId).then(response => {
    form.value = response.data;
    open.value = true;
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["deviceRef"].validate(valid => {
    if (valid) {
      configDensity(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getDeviceList(false);
      });
    }
  });
}

function daily(){
  router.push({ path: "/coalflow/daily" ,query: { showReturn: true }});
}
onBeforeUnmount(() => {
})
</script>
<style>

.label-text {
  display:inline-block;
  width: 150px;
  text-align: right;
  font-size: 25px
}
.content-text {
  font-size: 20px;
  text-align: left;
}
</style>
